<!-- 个人中心-->
<template>
  <div class="My">
    <header>
      <div @click="toHome">X</div>
      <div>个人中心</div>
      <div class="icon">
        <van-icon name="weapp-nav" />
      </div>
    </header>
    <main>
      <div class="moneyBox">
        <div class="money">
          <div class="touxiang">
            <div class="img"><img :src="list.avatar" alt="" /></div>
            <div class="user">
              <div>{{list.nickname}}</div>
              <div>{{list.phone}}</div>
            </div>
          </div>
          <div class="juan">
            <dl> 
              <dt @click="toBalace">{{list.balance}}</dt>
              <dd @click="toBalace">余额</dd>
            </dl>
            <dl>
              <dt>{{list.integral}}</dt>
              <dd>积分</dd>
            </dl>
            <dl>
              <dt>1</dt>
              <dd>优惠券</dd>
            </dl>
          </div>
          <div class="sign">签到</div>
        </div>
      </div>

      <div class="order">
        <div>订单中心</div>
        <div>查看全部 &gt;</div>
      </div>

      <div class="handle">
        <dl>
          <dt><van-icon name="balance-pay" /></dt>
          <dd>待付款</dd>
        </dl>
        <dl>
          <dt><van-icon name="logistics" /></dt>
          <dd>待发货</dd>
        </dl>
        <dl>
          <dt><van-icon name="gold-coin-o" /></dt>
          <dd>待收获</dd>
        </dl>
        <dl>
          <dt><van-icon name="chat-o" /></dt>
          <dd>待评价</dd>
        </dl>
        <dl>
          <dt><van-icon name="exchange" /></dt>
          <dd>售后/退款</dd>
        </dl>
      </div>

      <div class="food">
        <img src="../../images/a.jpg" alt="" />
      </div>

      <div class="more">
        <div class="morechildre">
          <van-icon name="diamond" />
          <div class="box">
            <div>会员中心</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="morechildre">
          <van-icon name="diamond" />
          <div class="box">
            <div>我的推广</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="morechildre">
          <van-icon name="diamond" />
          <div class="box">
            <div>我的余额</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="morechildre">
          <van-icon name="diamond" />
          <div class="box">
            <div>地址信息</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="morechildre">
          <van-icon name="diamond" />
          <div class="box">
            <div>我的收藏</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="morechildre">
          <van-icon name="diamond" />
          <div class="box">
            <div>优惠券</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="morechildre">
          <van-icon name="diamond" />
          <div class="box">
            <div>联系客服</div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import {apiMy} from '@/api/my.js'
export default {
  //import引入的组件需要注入到对象中才能使用

  components: {},
  data() {
    //这里存放数据
    return {
      list:{}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toHome:function(){
          this.$router.replace('/layout/home')
      },
    toBalace: function() {
      this.$router.replace("/layout/my/balace");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const flag = localStorage.getItem('token')
    if(flag===null){
      this.$router.push('/login')
    }
    const res=await apiMy({
      user_id:1
    })
    this.list=res.result
    // console.log(res,'ss')
    console.log(this.list,'ll')
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.My {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 3.125rem;
  background: #ededed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  padding: 0 1.25rem;
  margin-bottom: .3125rem;
  color:#000
}
main {
  height: 100%;
  flex: 1;
  overflow: auto;
}
.moneyBox {
  width: 100%;
  height: 12.5rem;
  padding: 0 .625rem;
  margin-bottom: .625rem;
  position: relative;
  display: flex;
  flex-direction: column;
  .money {
    width: 100%;
    height: 12.5rem;
    background: linear-gradient(to right, #f7362f, #f95b2e);
    border-radius: 1.25rem;
    
    display: flex;
    flex-direction: column;
     font-size: 1.25rem;
  }
}
.touxiang {
  width: 100%;
  height: 6.25rem;
  display: flex;
  align-items: center;
  padding: 0 .625rem;
  .user {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    div {
      margin: .3125rem;
    }
  }
  .img {
    padding: 0 .625rem;
  }
  .img img {
    width: 4.375rem;
    height: 4.375rem;
    border-radius: 50%;
  }
}
.juan {
  width: 100%;
  height: 6.25rem;
  font-size: 1.25rem;
  display: flex;
  color: #ffff;
  justify-content: space-around;
  align-items: center;
  dl {
    text-align: center;
    dd {
      font-size: .875rem;
      margin-top: .3125rem;
    }
  }
}
.sign {
  width: 5.625rem;
  height: 2.5rem;
  background: #fcdd51;
  position: absolute;
  top: 1.875rem;
  right: -0.625rem;
  text-align: center;
  border-radius: 1.25rem 0 0 1.25rem;
  line-height: 2.5rem;
}
.order {
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: space-between;
  padding: 0 1.25rem;
  align-items: center;
  font-size: 1rem;
  border-bottom: 1px solid #ccc;
}

.handle {
  width: 100%;
  height: 6.25rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  dl {
    text-align: center;
    dt {
      .van-icon {
        font-size: 2.1875rem;
      }
    }
  }
}
.food {
  width: 100%;
  height: 9.375rem;
  img {
    width: 100%;
    height: 9.375rem;
  }
}
.morechildre {
  width: 100%;
  height: 3.75rem;
  display: flex;
  align-items: center;
  .van-icon {
    margin: 0 .625rem;
    font-size: .9375rem;
  }
}
.box {
  width: 98%;
  height: 3.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
</style>
